<template>
  <div>
    <!-- <to-search></to-search> -->
    <to-back></to-back>

    <ul class="show_cate">
      <li>全部(0)</li>
      <li>降价(0)</li>
      <li>常卖(0)</li>
      <li>分类</li>
    </ul>
    <div class="pro">
      <van-checkbox class="xiao_u" v-model="checked" checked-color="#ff4400">小U自营</van-checkbox>
      <div class="pro_left">
        <span>以免运费</span>|
        <span>领券</span>
      </div>
    </div>
    <div class="all_xuanze" @click="changeAllChecked">
      <img :src="have" v-if="allChecked" alt />
      <img :src="no" v-else alt />
      <span>全选</span>
      <span class="price_all">总价：{{allPrice}}</span>
    </div>
    <div class="shop_list">
      <div class="product" v-for="(item,index) in product" :key="item.id">
        <div class="product_left" @click="changeOne(index)">
          <!-- 图片 -->
          <img :src="have" v-if="item.checked" alt />
          <img :src="no" v-else alt />
        </div>
        <div class="product_center">
          <img :src="$pre+item.img" alt />
        </div>
        <div class="product_text">
          <h3>名称：{{item.goodsname}}</h3>
          <h4>数量：{{item.num}}</h4>
          <div>价格:{{item.price}}</div>
          <button @click="subShop(item.id,item.num)">-</button>
          {{item.num}}
          <button @click="addShop(item.id)">+</button>
          <van-button round type="info" @click="del(item.id)">删除</van-button>
        </div>
      </div>
    </div>

    <van-submit-bar class="jiesuan" button-text="提交订单" @submit="onSubmit" />

    <van-empty
      class="All_price_pos"
      v-if="product.length==0"
      image="search"
      description="购物车空空，快去购物吧"
    />
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
// 引入图片
import no from "../../assets/img/no.jpeg";
import have from "../../assets/img/have.jpeg";
import { reqShopList, reqDelShop, reqAddNum } from "../../http/http";
export default {
  data() {
    return {
      product: [], //数据
      checked: false,
      radio: "2",
      value: "",
      // bind-group:false
      no, //没有选中的图片
      have, //选中的图片，
      //  Q-全选：设置全选初始值
      allChecked: false //默认是不选中的
    };
  },
  mounted() {
    // 一进来页面就要发请求
    this.init();
    // a:在这里初始化一个开关----默认开关是开着的
    this.isRequest = true;
  },
  methods: {
    init() {
      reqShopList({
        uid: JSON.parse(localStorage.getItem("user")).uid
      }).then(res => {
        // d:在再一次发起请求的地方打开开关，方便下一次请求
        this.isRequest = true;
        // console.log(res);
        if (res.data.code == 200) {
          let arr = res.data.list ? res.data.list : [];
          //为arr添加选中的是否选中的属性：checked--->先循环，再赋值

          // 11.由于arr是刚刚请回的数据,this.product是上一侧的列表的数据，直接赋值的话arr会把上一次的给覆盖掉，所以，我们项要上一次是什么样的，在做操作后还是什么样的
          // 所以要在遍历的时候做操作
          // arr=[{id:1},{id:2},{id:3}]
          // product=[{id:1,checked:true},{id:2,checked:false}]
          arr.forEach(item => {
            // 找到product中id是arr中id相等的那一项
            let obj = this.product.find(i => {
              return i.id == item.id;
            });
            // 将原来是选中的还设为选中
            item.checked = obj ? obj.checked : false;
          });
          this.product = arr;
        } else {
          alert(res.data.msg);
          if (res.data.msg == "登录已过期或访问权限受限") {
            //跳转到登录页
            this.$router.push("/login");
          }
        }
      });
    },
    // 11.去挑转到订单页面
    onSubmit() {
      // 现将确认订单的数据存到本地存储中--countmoney： 总价 countnumber：总数量 idstr:购物车
      // 总数量==是选上的所有的商品的总数量
      let endNum = this.product.reduce((val, item) => {
        return item.checked ? (val += item.num) : val;
      }, 0);

      // 购物车数据--id
      let id = this.product.reduce((val, item) => {
        return item.checked ? (val += item.id + ",") : val;
      }, "");
      // 此时到字符串最后，就多了一个",",所以要把他截下去

      let d = {
        countmoney: this.allPrice,
        countnumber: endNum,
        idstr: id.slice(0, id.length - 1)
      };
      // 存到本地
      sessionStorage.setItem("d", JSON.stringify(d));

      this.$router.push("/order");
    },

    // 点击了删除按钮
    del(id) {
      Dialog.confirm({
        title: "删除提示",
        message: "你确定要删除么？"
      }).then(() => {
        // on confirm
        // console.log('then');
        // 发请求---删除
        reqDelShop({
          id: id
        }).then(res => {
          if (res.data.msg == 200) {
            // 删除成功
            Toast(res.data.msg);
            // 需要重新渲染页面
          }
          this.init();
        });
      });
    },
    // 数量自加
    addShop(id) {
      // this.product.reduect((val,))
      reqAddNum({
        id: id,
        type: 2
      }).then(res => {
        if (res.data.code == 200) {
          // 成功
          Toast(res.data.msg);
          // 重新刷新列表
          this.init();
        }
      });
    },
    // 数量自减
    subShop(id, num) {
      // b:一进来就判断开关的状态
      if (this.isRequest) {
        // 先做自减的临界值
        if (num <= 1) {
          Toast("宝贝不能在减少了");
          return;
        }
        // 此时还是有bug存在，所以得用防抖节流思想
        // 所以我们要初始化一个开关a,b,c,d

        // c:这里需要关闭开关
        this.isRequest = false;
        reqAddNum({
          id: id,
          type: 1
        }).then(res => {
          if (res.data.code == 200) {
            // 成功
            Toast(res.data.msg);
            // 重新刷新列表
            this.init();
          }
        });
      }
    },
    // 修改了全选按钮
    changeAllChecked() {
      // 取他的相反值
      // 切换全选
      this.allChecked = !this.allChecked;
      // 所有的单个选中状态跟全选一样--->全选选上，就都选上，全选没选，就都没选
      this.product.forEach(item => {
        item.checked = this.allChecked;
      });
    },
    // 点击修改某一个单选的状态
    changeOne(index) {
      // 如果数id的话:let index =this.product.fiindIndex(item=>{item.id == iid})
      // 下标---切换自己的状态
      this.product[index].checked = !this.product[index].checked;
      // 当单个状态都选上的时候-->全选就被选上
      this.allChecked = this.product.every(item => {
        return item.checked;
      });
    }
  },
  computed: {
    // 计算总价
    allPrice() {
      return this.product.reduce(
        (val, item) => (item.checked ? (val += item.price * item.num) : val),
        0
      );
    }
  }
};
</script>

<style scoped lang="less">
body {
  background-color: red;
}

.product {
  /* width: 100vw; */
  padding: 0 0.2rem;
}
img {
  width: 2.2rem;
  height: 2.2rem;
}
.jiesuan {
  margin-bottom: 0.9rem;
}

.show_cate {
  background: linear-gradient(#ff4400, #ef7158, #ef8877);
  height: 0.6rem;
  line-height: 0.6rem;
  color: #fff;
  display: flex;
  justify-content: space-evenly;
  /* position: fixed;
  left: 0; */
  /* top: 1.6rem; */
  width: 100vw;
  margin-top: 0.8rem;
}
.show_cate li {
  width: 100vw;
  text-align: center;
  flex: 1;
}

/* 小Uziying  */
.pro {
  /* margin-top: .8rem; */
  height: 0.6rem;
  line-height: 0.6rem;
  padding: 0 0.1rem;
  display: flex;
  justify-content: space-between;
}
.xiao_u {
  height: 0.6rem;
}
.pro_left {
  color: #000;
}

/* =============== */

.shop_list {
  height: 2.14rem;
}
.shop_list .product {
  display: flex;
}
.product_text {
  flex: 1;
}
.product_text h3 {
  font-size: 0.3rem;
  line-height: 0.5rem;
}
.product_text h4,
div {
  line-height: 0.4rem;
}
/* .product_text div{
  line-height: ;
} */
.main {
  margin-top: 0rem;
}

.product_left {
  width: 0.4rem;
}
.product_center {
  width: 2.6rem;
  height: 2.14rem;
}
.product_text button {
  border: none;
  background-color: #f2f2f2;
  text-align: center;
}

/deep/.van-button--info {
  border: none;
  // width: 0.8rem;
  height: 0.4rem;
  background: linear-gradient(#ff4400, #ef7158, #ef8877);
  color: #fff;
  font-size: 0.18rem !important;
  float: right;
}
.product_left img {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.8rem;
}
.all_xuanze img {
  width: 0.4rem;
  height: 0.4rem;
}
.price_all {
  float: right;
  margin-right: 2rem;
  font-size: 0.3rem;
  color: #ff4400;
  font-weight: 800;
}
</style>